<div class="wrapper"
	[style.background-color]="(wallCustomBackground$ | async).backgroundColor">
	<media-wall-header
		*ngIf="(wallDisplayHeader$ | async)"
		[query]="(query$ | async).displayString"
		[headerTitle]="(wallHeaderTitle$ | async)"
		[wallCustomHeader]="(wallCustomHeader$ | async)"></media-wall-header>
	<div class="wall-wrapper" (mousemove)="displayToolBar($event)">
		<div *ngIf="(isWallSearching$ | async)" class="align-searching">
			<div class="searching">
				<app-lazy-img src="{{headerImageUrl}}" width="100" height="120"></app-lazy-img>
			</div>
		</div>
		<masonry
			[class.hidden-header]="!(wallDisplayHeader$ | async)"
			[options]="masonryOptions"
			*ngIf="!(isWallSearching$ | async)">
			<masonry-brick
				class="brick"
				[style.width]="columnCount"
				*ngFor="let item of (apiWallResponseResults$ | async);">
				<media-wall-fluid-card
					[feedItem]="item"
					[wallCustomCard$]="wallCustomCard$"></media-wall-fluid-card>
			</masonry-brick>
		</masonry>
		<div class="results-not-found"
			*ngIf="!(areWallResultsAvailable$ | async) &&
			((query$ | async).queryString) &&
			!(isWallSearching$ | async )" >
			<media-wall-not-found
				[fontColor]="(wallCustomCard$ | async).fontColor"></media-wall-not-found>
		</div>
		<media-wall-menu
			[query]="(query$ | async).displayString"
			[showHideMenu]="showToolBar"
			(showHideCustomization)="openDialog($event)"></media-wall-menu>
	</div>
</div>
